<div id='carList_listArea'></div>
<!-- 遍历已绑定的车牌 
<div style='display:flex;margin-top:10px;'>
	<div style='flex:1'>吉EEJ355</div>
	<div style='border:0px solid;width:100px;text-align:right'><button>解除绑定</button></div>
</div>
-->

<!-- 添加新车牌 -->
<div id='carList_addAreaAll' style='text-align:centers;margin:10px 0;display:nones'>
	<span id='carList_addArea' style='display:none'>
		<input type="text" id='carList_addArea_input' placeholder='输入新车牌' />
		<button id='carList_addArea_submit'>提交</button>
		<button id='carList_addArea_back'>返回</button>
	</span>
	<div style='text-align:center'>
		<button id='carList_addArea_init'>添加车牌</button>
	</div>
</div>
<script>
$(function(){

	//添加新车牌相关
	$('#carList_addArea_init').click(function(){
		$('#carList_addArea').show();
		$('#carList_addArea_init').hide();
	});
	$('#carList_addArea_back').click(function(){
		$('#carList_addArea').hide();
		$('#carList_addArea_init').show();
	});
	$('#carList_addArea_submit').click(function(){
		var number = ChangeChar($('#carList_addArea_input').val().trim());

		Check_Car_Number(number);	//检查车牌号格式
		var type = 'band_car_number';
		Get_Token(type,function(t){
			var data = {
				token:t,
				type:type,
				openid:ChangeChar(GetCookie('openid')),
				number:number
			};
			Ajax(data,function(res){
				//console.log(res);return;
				switch(res){
					case 'err':alert('缺少必要的参数 !');break;
					case 'err3':
					case 'err1':alert('车牌以存在或绑定个数超过5个 !');break;
					case 'err2':alert('绑定出现异常 !');break;
					case 'ok':
						alert('绑定成功 !');
						$('#carList_addArea').hide();
						$('#carList_addArea_init').show();
						carList_resetView();	//刷新当前绑定车牌的列表
					break;
				}
			});
		});
	});


	carList_ViewCarList();	//显示绑定车牌列表




});



//显示绑定车牌列表
function carList_ViewCarList(){
	if(sessionStorage.car_list && /^{.*}$/.test(sessionStorage.car_list)){
		C('sess');
		carList_insertCarList();
	}else{
		//获取并展示已绑定车牌
		Ajax({},function(res){		//缓存获取数据
			if(/^{.*}$/.test(res)){
				C('cache');
				sessionStorage.car_list = res;
				carList_insertCarList();
			}else{
				var type='get_bind_car_list';		//后台获取数据
				Get_Token(type,function(t){
					var data = {
						token:t,
						type:type,
						openid:ChangeChar(GetCookie('openid'))
					};
					Ajax(data,function(res){
						C('after');
						if(/^{.*}$/.test(res)){
					 		sessionStorage.car_list = res;
					 		carList_insertCarList();
						}
					},main_url,1);
				});
			}
		},'Cache/UserBindCarList/'+GetCookie('openid'),1);
	}
}





//解析车牌列表数据并添加到元素中
function carList_insertCarList(){
	var obj = JSON.parse(sessionStorage.car_list).data;
	if(!obj){
		$('#carList_listArea').html('<div style="text-align:center;color:red">暂未绑定任何车牌</div>');
	}else{
		if(obj.length < 5){
			$('#carList_addAreaAll').show();
		}else{
			$('#carList_addAreaAll').hide();
		}
		var carList_listStr = '';
		for(var i=0;i<obj.length;i++){
			var carList_number = obj[i].number;
			carList_listStr +="<div style='display:flex;margin-top:10px;'>";
			carList_listStr +="<div style='flex:1'>"+carList_number+"</div>";
			carList_listStr +="<div style='border:0px solid;width:100px;text-align:right'><button onclick=carList_DelNumber('"+carList_number+"')>解除绑定</button></div>";
			carList_listStr +="</div>";
		}
		$('#carList_listArea').html(carList_listStr);
	}
}


//删除解绑已绑定车牌
function carList_DelNumber(number){
	if(!confirm('确认解绑该车牌?')){
		return;
	}
	$('#carList_listArea').html('');	//清空车牌列表
	var openid = ChangeChar(GetCookie('openid'));
	var number = ChangeChar(number);
	var type = 'del_bind_number';
	Get_Token(type,function(t){
		var data={
			token:t,
			type:type,
			openid:openid,
			number:number
		};
		Ajax(data,function(res){
			switch(res){
				case 'err':alert('操作异常!');break;
				case 'ok':
					alert('解绑成功!');
					carList_resetView();	//刷新当前绑定车牌的列表
				break;
			}
		});
	});
}


//刷新当前绑定车牌的列表
function carList_resetView(){
	sessionStorage.removeItem('car_list');	//删除sess缓存
	carList_ViewCarList();	//显示绑定车牌列表
}
</script>